<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="利润报表">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        #countTable {
            border-top: 1px solid #d7d7d7;
            border-bottom: 1px solid #d7d7d7;
            background: #f2f2f2;
            padding: 10px 0 10px 0;
        }

        #countTable td{
            padding: 4px;
        }

        .layui-table-body td {
            padding: 0;
        }
    </style>






    <script>
        jQuery(function () {
            profitsData();
            ajaxSelect("${baseUrl}organization/store/getStores.action","storeId","全部");
        });


        layui.use(['form', 'table','laydate','laytpl','element'], function () {
            let $ = layui.jquery,
                form = layui.form,
                laydate = layui.laydate;

            laydate.render({
                elem: '#date',
                range:'~',
                done: function(value, date, endDate){
                    if (!emptyEntity(value)) {
                        $('[name="date1"]').val(getDateFromLayUiDate(date));
                        $('[name="date2"]').val(getDateFromLayUiDate(endDate));
                    } else {
                        $('[name="date1"]').val('');
                        $('[name="date2"]').val('');
                    }
                    profitsData();
                }
            });

            form.on('select(storeId)', function (data) {
                profitsData();
            });

        });


        function renderTable(list) {
            layui.use([ 'table'], function () {
                let $ = layui.jquery,
                    table = layui.table;
                table.render({
                    id: 'table',
                    elem: '#table',
                    data: list,
                    cols: [[
                        {
                            field: 'typeName', title: "收支项目", templet: function (d) {
                                if (d.type == 0) {
                                    return d.typeName;
                                } else {
                                    return '<div style="padding-left: 50px;">' + d.typeName + '</div>'
                                }
                            }
                        },
                        {
                            title: '本期金额(元)', style: "font-size:12px;", templet: function (d) {
                                if (d.type == 0) {
                                    return '<div style="color:#FF5722;font-size: 17px; ">' + getPrice(d.amount) + '</div>'
                                } else {
                                    return getPrice(d.amount);
                                }
                            }
                        },
                    ]],
                    limit: Number.MAX_VALUE,
                    done: function (res, curr, count) {
                    }
                });
            });
        }


        function genSearch() {
            let json = getFormJson($("#searchForm"));
            return json;
        }


        function profitsData() {
            get("${baseUrl}financeCount/profitAnalysis/profitsData.action"+genParam(genSearch()), function (res) {
                if (res.code == 1) {
                    renderTable(res.data.list);
                    $("#profits").html(getPrice(res.data.profits));
                    $("#inAmt").html(getPrice(res.data.inAmt));
                    $("#outAmt").html(getPrice(res.data.outAmt));
                }
            });
        }
    </script>

</html:header>
<body style="margin: 0; background-color: #FFFFFF; padding: 15p;">
    <form class="layui-form" action="" id="searchForm">
        <input type="hidden" name="date1">
        <input type="hidden" name="date2">

        <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-inline">
                <label class="layui-form-label">门店</label>
                <div class="layui-input-inline">
                    <select name="storeId" lay-filter="storeId"></select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input type="text" id="date" placeholder="请选择日期" class="layui-input" autocomplete="off">
                </div>
            </div>
        </div>
    </form>

    <table id="countTable" width="100%" border="0" cellspacing="0" cellpadding="8" align="center">
        <tbody>
        <tr>
            <td align="center" style="color: #999;font-size: 14px">利润</td>
            <td align="center" style="color: #666;font-size: 14px">=</td>
            <td align="center" style="color: #999;font-size: 14px">收入</td>
            <td align="center" style="color: #666;font-size: 14px">-</td>
            <td align="center" style="color: #999;font-size: 14px">支出</td>
        </tr>

        <tr>
            <td align="center" style="color: #FF5722;">
                <span>￥</span>
                <span id="profits" style="font-size: 24px;font-weight: bold;">125.00</span>
            </td>
            <td align="center" style="color: #FF5722;font-size: 14px"></td>
            <td align="center" style="color: #FF5722;font-size: 14px">
                <span>￥</span>
                <span id="inAmt" style="font-size: 24px;font-weight: bold;">1212.00</span>
            </td>
            <td align="center" style="color: #FF5722;font-size: 14px"></td>
            <td align="center" style="color: #FF5722;font-size: 14px">
                <span>￥</span>
                <span id="outAmt" style="font-size: 24px;font-weight: bold;">1121.00</span>
            </td>
        </tr>
        </tbody>
    </table>


    <div style="padding: 0 2%">
        <table class="layui-hide" id="table" lay-filter="table" lay-size="sm"></table>
    </div>

</body>

<html:loading/>
</html>